<template>
    <div>
        <el-dialog title="添加产品销售出库行" v-model="localVisible" @close="closeAddSalesDialog" width="70%"
            @open="openAddSalesDialog">
            <el-form :model="sales" label-width="100px" ref="refFormRef" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="7">
                        <el-form-item label="产品编码" prop="itemCode">
                            <el-input v-model="sales.itemCode" placeholder="请选择库存物资" >
                                <template #append>
                                    <el-button type="primary" :icon="Search" @click="selectInventory"></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="产品名称">
                            <el-input v-model="sales.itemName" placeholder="请输入产品名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="单位">
                            <el-input v-model="sales.unitOfMeasure" placeholder="请输入单位"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="规格型号">
                            <el-input type="textarea" v-model="sales.specification" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="7">
                        <el-form-item label="仓库">
                            <el-input v-model="sales.warehouseName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="库区">
                            <el-input v-model="sales.locationName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="库位">
                            <el-input v-model="sales.areaName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="7">
                        <el-form-item label="批次号">
                            <el-input v-model="sales.batchCode" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="出库数量" prop="quantitySalse">
                            <el-input v-model="sales.quantitySalse" placeholder="请输入出库数量"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="sales.remark" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="addSalesClick">确定</el-button>
                    <el-button @click="closeAddSalesDialog">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <InventorySelect :InventorySelect="InventorySelectVisible"
            @update:InventorySelect="InventorySelectVisibleChange" @selectInventoryRow="handleInventoryRow">
        </InventorySelect>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import InventorySelect from './InventorySelect.vue'
import {insertSalesOutboundLine} from '@/apis/index'
import { ElMessage } from 'element-plus'
const props = defineProps({
    addSalesVisible: Boolean,
    salesId: Number
})
const sales = ref({
    materialStockId: null,
    salseId:null,
    itemCode: null,
    itemName: null,
    unitOfMeasure: null,
    specification: null,
    warehouseName: null,
    locationName: null,
    areaName: null,
    batchCode: null,
    quantitySalse: null,
    remark: null
})

//引用表单实例
const refFormRef = ref(null); 
//定义验证规则
const rules = {
    itemCode: [
        { required: true, message: '请选择库存物资', trigger: 'blur' }
    ],
    quantitySalse: [
        { required: true, message: '请输入出库数量', trigger: 'blur' },
        {
            validator:(rule, value, callback)=>{
                if(value<=0){return callback(new Error('出库数量必须大于0'))}
                // 验证通过调用回调函数继续执行
                callback()
            }
        }
    ]
}

const localVisible = ref(props.addSalesVisible);
const InventorySelectVisible = ref(false)
// 监听父组件传递的prop变化，并同步到本地状态
watch(() => props.addSalesVisible, (newValue) => {
    localVisible.value = newValue;
});

const emit = defineEmits(['update:addSalesVisible', 'salesRow'])
const closeAddSalesDialog = () => {
    emit('update:addSalesVisible', false)
}

// 打开库存物资选择框
const selectInventory = () => {
    InventorySelectVisible.value = !InventorySelectVisible.value
}


const openAddSalesDialog = () => {
    sales.value = {}
    // 清除验证规则
    refFormRef.value.clearValidate()
}

// 添加销售出库行
const addSalesClick = async () => {
   refFormRef.value.validate(async vali=>{
    if(vali && props.salesId){
        sales.value.salseId = props.salesId
        await insertSalesOutboundLine(sales.value)
        ElMessage.success("添加成功")
        emit('update:addSalesVisible', false)
    }else{
        ElMessage.error("请正确填写数据")
    }
   })
}

//监听库存物资选择框关闭事件
const InventorySelectVisibleChange = (val) => {
    InventorySelectVisible.value = val
}
//监听库存物资选择框选中行事件
const handleInventoryRow = (row) => {
    if (!row) return
    const {
        materialProductId, materialProductCode, materialProductName, specificationAndModel,
        warehouseName, warehouseAreaName, warehouseLocationName, inventoryQuantity
    } = { ...row }
    sales.value.materialStockId = materialProductId
    sales.value.itemCode = materialProductCode
    sales.value.itemName = materialProductName
    sales.value.specification = specificationAndModel
    sales.value.warehouseName = warehouseName
    sales.value.areaName = warehouseAreaName
    sales.value.locationName = warehouseLocationName
    sales.value.quantitySalse = inventoryQuantity
}


</script>

<style scoped></style>
